<template>
  <div class="tender-purchase">
    <div class="box">
      <div class="title">
        <p>标书购买登记表</p>
      </div>
      <div class="body">
        <el-divider />
        <div class="title">请选择需要购买的标书信息</div>
        <div style="text-align: center;margin-bottom: 20px;">
          <el-button type="primary" @click="initProject">点击选择项目</el-button>
        </div>
        <el-form :model="form.list" label-width="155px" :rules="form.rules" ref="formRules">
          <el-row>
            <el-col :span="12">
              <el-form-item label="项目名称" prop="name">{{ form.list.name }}</el-form-item>
              <el-form-item label="标书费用" prop="money" style="color: #f40">{{ form.list.money ? "¥ " + form.list.money : ""
              }}</el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="项目编号" prop="number">{{ form.list.number }}</el-form-item>
            </el-col>

            <el-col :span="24">
              <el-divider />
              <div class="title">单位及个人信息</div>
            </el-col>
            <el-col :span="12">
              <el-form-item label="客户类型" prop="customer_type">
                <el-select v-model="form.list.customer_type" placeholder="请选择" clearable style="width: 100%">
                  <el-option label="老客户" value="0" />
                  <el-option label="新客户" value="1" />
                </el-select>
              </el-form-item>
              <el-form-item label="联系人" prop="customer_name">
                <el-input v-model="form.list.customer_name" placeholder="请输入" clearable />
              </el-form-item>
              <el-form-item label="Email地址" prop="customer_email">
                <el-input v-model="form.list.customer_email" placeholder="请输入" clearable />
              </el-form-item>
              <el-form-item label="传真">
                <el-input v-model="form.list.customer_fax" placeholder="请输入" clearable />
              </el-form-item>
              <el-form-item label="备注(拟报名标项/子包)">
                <el-input v-model="form.list.remark" placeholder="请输入" clearable type="textarea"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="购买单位" prop="customer_unit">
                <el-input v-model="form.list.customer_unit" placeholder="请输入" clearable />
              </el-form-item>
              <el-form-item label="手机号" prop="customer_phone">
                <el-input v-model="form.list.customer_phone" placeholder="请输入" clearable />
              </el-form-item>
              <el-form-item label="提示"> 以此号码获取下载标书验证短信 </el-form-item>
              <el-form-item label="购买日期">{{ moment().format('YYYY-MM-DD') }}</el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="营业执照" prop="business_license">
                <UploadImage @getImageList="getImagesList" :limit="1" />
              </el-form-item>
            </el-col>

            <el-col :span="24">
              <el-divider />
              <div class="title">开票信息</div>
            </el-col>
            <el-col :span="12">
              <el-form-item label="发票种类" prop="invoice_type">
                <el-select v-model="form.list.invoice_type" placeholder="请选择" clearable style="width: 100%">
                  <el-option label="电子发票" :value="0" />
                </el-select>
              </el-form-item>
              <el-form-item label="地址、电话" prop="invoice_address_phone">
                <el-input v-model="form.list.invoice_address_phone" placeholder="请输入" clearable />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="纳税人识别号" prop="taxpayer_identification_number">
                <el-input v-model="form.list.taxpayer_identification_number" placeholder="请输入" clearable />
              </el-form-item>
              <el-form-item label="开户行及账号" prop="invoice_bank_number">
                <el-input v-model="form.list.invoice_bank_number" placeholder="请输入" clearable />
              </el-form-item>
            </el-col>

            <el-col :span="24">
              <el-divider />
              <div class="title">发票邮寄信息</div>
            </el-col>
            <el-col :span="12">
              <el-form-item label="发票接收人">
                <el-input v-model="form.list.invoice_name" placeholder="请输入" clearable />
              </el-form-item>
              <el-form-item label="发票邮寄地址">
                <el-input v-model="form.list.invoice_address" placeholder="请输入" clearable />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="发票接收人电话">
                <el-input v-model="form.list.invoice_phone" placeholder="请输入" clearable />
              </el-form-item>
              <el-form-item label="政府">
                <el-select v-model="form.list.invoice_government" placeholder="请选择" clearable style="width: 100%">
                  <el-option label="政府" :value="0" />
                  <el-option label="非政府" :value="1" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-divider />
              <div class="title">提交后请在“标书下载”页面,通过获取短信验证码进行标书支付和下载</div>
            </el-col>
            <el-col :span="24" style="text-align: center">
              <el-button type="primary" @click="submit(formRules)" :loading="loading">提 交</el-button>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>

    <!-- 选择项目 -->
    <el-dialog v-model="project.show" title="选择项目" width="1400px" :before-close="handleClose">
      <div class="search">
        <el-form :inline="true">
          <el-form-item label="项目编号">
            <el-input v-model="project.data.query.number" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="项目名称">
            <el-input v-model="project.data.query.name" placeholder="请输入" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="getList">搜 索</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="body">
        <el-table :data="project.list" style="width: 100%" border v-loading="project.loading">
          <el-table-column prop="number" label="项目编号" />
          <el-table-column prop="title" label="项目名称" />
          <el-table-column label="价格">
            <template #default="scope">
              <div style="color: #f40">¥ {{ scope.row.money }}</div>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="120px">
            <template #default="scope">
              <el-button type="primary" @click="checkProject(scope.row)">选 择</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="page">
          <pagination :count="page.count" :size="page.size" :current="page.current" @getPage="getPage" />
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script  setup>
import { ref, toRefs } from "vue";
import { getProjectList, handleTenderOrder } from "@/api/tenderOrder";
import UploadImage from "@/components/UploadImage";
import { ElMessage } from "element-plus";
import moment from 'moment';

let form = ref({
  list: {},
  rules: {
    name: [{ required: true, message: "请选择项目名称", trigger: "change" }],
    money: [{ required: true, message: "请选择标书费用", trigger: "change" }],
    number: [{ required: true, message: "请选择项目编号", trigger: "change" }],
    customer_type: [{ required: true, message: "请选择客户类型", trigger: "change" }],
    customer_name: [{ required: true, message: "请输入购买单位", trigger: "blur" }],
    customer_email: [{ required: true, message: "请输入Email地址", trigger: "blur" }],
    customer_unit: [{ required: true, message: "请输入联系人", trigger: "blur" }],
    customer_phone: [
      { required: true, message: "请输入手机号", trigger: "blur" },
      { pattern: /^1[0-9]{10}$/, message: "手机号码格式不正确", trigger: "blur" },
    ],
    business_license: [{ required: true, message: "请上传营业执照", trigger: "change" }],

    invoice_type: [{ required: true, message: "请选择发票种类", trigger: "change" }],
    taxpayer_identification_number: [{ required: true, message: "请输入纳税人识别号", trigger: "blur" }],
    invoice_address_phone: [{ required: true, message: "请输入地址、电话", trigger: "blur" }],
    invoice_bank_number: [{ required: true, message: "请输入开户行及账号", trigger: "blur" }],
  },
});
let formRules = ref(),
  loading = ref(false);

const submit = (formRules) => {
  formRules.validate((valid, fields) => {
    if (valid) {
      loading.value = true;
      let data = { ...form.value.list };
      handleTenderOrder(data)
        .then((res) => {
          setTimeout(() => {
            ElMessage({ type: "success", message: '提交成功,请支付后下载标书' });
            location.href = "/download-tender";
          }, 700);
        })
        .finally(() => setTimeout(() => (loading.value = false), 700));
    }
  });
};

// 项目
let project = ref({
  show: false,
  list: [],
  data: {
    query: {},
    page: { current: 1, size: 10, count: 0 },
  },
  loading: false,
});

let { page, query } = toRefs(project.value.data);
// 初始化项目
let initProject = () => {
  project.value.show = true;
  getList();
};

// 获取项目列表
let getList = () => {
  project.value.loading = true;
  getProjectList(project.value.data).then((res) => {
    setTimeout(() => {
      project.value.list = res.data;
      page.value.count = res.count;
      project.value.loading = false;
    }, 150);
  });
};

// 分页获取
const getPage = ({ size, current }) => {
  page.value.size = size;
  page.value.current = current;
  getList();
};

// 选择项目
let checkProject = (val) => {
  Object.assign(form.value.list, val);
  form.value.list.path = form.value.list.file.link;
  form.value.list.name = form.value.list.title;
  delete form.value.list.file;
  delete form.value.list.title;
  project.value.show = false;
};

// 获取上传的营业执照
let getImagesList = (val) => {
  form.value.list.business_license = val[0].url;
};
</script>
<style scoped lang='scss'>
.tender-purchase {
  min-height: 100vh;
  background-image: url(@/assets/images/buy-bg.jpg);
  display: flex;
  justify-content: center;

  >.box {
    margin: 50px 0;
    background-color: #f0f1f2;
    width: 960px;
    border-radius: 6px;
    padding: 20px;

    >.title {
      text-align: center;

      p {
        margin: 0;
        font-size: 20px;
        font-weight: bold;
        margin-bottom: 5px;
      }
    }

    >.body {
      margin-top: 20px;

      .title {
        font-size: 16px;
        color: red;
        text-align: center;
        font-weight: bold;
        margin-bottom: 20px;
      }
    }
  }

  ::v-deep .el-dialog {
    .el-dialog__body {
      padding-bottom: 10px;
    }
  }

  .page {
    padding: 15px;

    .el-pagination {
      justify-content: flex-end;
    }
  }
}
</style>